<template>
	<view class="bb">
		<view>
			<view>收货人</view>
			<input :class="sel==1?'a':''" type="text" @focus="a(1)" v-model="shouhuoren" />
		</view>
		<view>
			<view>联系电话</view>
			<input :class="sel==2?'a':''" type="text" @focus="a(2)" v-model="tel" />
		</view>
		<view>
			<view>所在地区</view>
			<picker mode="region" @change="getdizhi">
				<view>选择所在地区
					<text class="iconfont icon-youjiantou"></text>
				</view>
			</picker>
		</view>
		<view>
			<view>
				详细地址
			</view>
			<input :class="sel==3?'a':''" type="text" @focus="a(3)" v-model="xiangxidizhi" />
		</view>
		<view>
			<view>设置为默认地址</view>
			<switch name="switch" @change="change" :checked="ismoren==1?true:false" />
		</view>
		<button type="warn" @click="show">保存</button>
	</view>

</template>
<script>
	import {
		toRefs,
		onMounted,
		reactive,
		computed
	} from 'vue'

	import store from '../../store/index.js'
	import http from '../../utils/http.js'

	export default {
		setup() {

			let data = reactive({
				shouhuoren: 0,
				tel: 0,
				dizhi: 0,
				b: {},
				sel: 0,
				ismoren: 0,
				xiangxidizhi:'',
				change: (e) => {
					if (e.detail.value) {
						data.ismoren = 1
					} else {
						data.ismoren = 0
					}
				},
				a: (a) => {
					data.sel = a
				},
				show: () => {
					if (data.b.s_id != '' && data.shouhuoren != '' && data.tel != '' && data.dizhi != '') {
						http({
							url: '/SetBasic/xindizhi',
							method: 'post',
							data: {
								id: data.b.s_id,
								shouhuoren: data.shouhuoren,
								tel: data.tel,
								dizhi: data.dizhi,
								ismoren: data.ismoren,
								xiangxidizhi:data.xiangxidizhi
							}
						}).then((res) => {
							console.log(res)
							uni.showToast({
								title: '保存成功',
								duration: 1500
							});
						})
					}else{
						uni.showToast({
							icon:'error',
							title: '请输入完整信息',
							duration: 1500
						});
					}

				},
				getdizhi: (ev) => {
					let newdizhi = ev.detail.value.join("")
					data.dizhi = newdizhi
				}

			})
			onMounted(() => {
				data.b = store.state.dizhi.a
				data.shouhuoren = data.b.s_people
				data.tel = data.b.s_tel
				data.dizhi = data.b.s_dizhi
				data.ismoren = data.b.s_isMoren
				data.xiangxidizhi=data.b.s_xiangqingdizhi
				console.log(data.dizhi, data.tel, data.shouhuoren, data.ismoren,data.xiangxidizhi)
			})
			return {
				...toRefs(data),
			}
		}
	}
</script>

<style lang="less">
	@import url("~@/static/fonts/iconfont.css");

	.a {
		outline: 1rpx solid #CFD1D2;
	}

	.bb {
		>button {
			margin: 100rpx 100rpx;
		}

		padding: 30rpx 30rpx;

		&>view {
			view {
				color: #5F5F5F;
				padding: 10rpx;
			}

			margin: 30rpx 0;
			display: flex;
			justify-content: space-between;

			input {
				margin-left: 30rpx;
				width: 450rpx;
				padding: 10rpx;
			}

			&:nth-child(3) {
				margin: 35rpx 0;
			}
		}
	}
</style>
